<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../res/layui/css/layui.css" media="all">
    <script src="../../res/js/jquery-3.4.1.min.js" type="text/javascript"
            charset="utf-8"></script>

</head>
<body>
<fieldset class="layui-elem-field layui-field-title"
          style="margin-top: 10px;">
    <legend>用户管理</legend>
</fieldset>
<blockquote class="layui-elem-quote role_search">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input id="keyword" type="text" value="" placeholder="请输入关键字"
                   class="layui-input search_input">
        </div>
        <a class="layui-btn layui-btn-normal newsAdd_btn" onclick="add()">添数据</a>
    </div>
</blockquote>
<div style="margin-top: -20px;">
    <table id="demo" lay-filter="test"></table>
</div>
<script src="../../res/layui/layui.js"></script>
<script>
    layui.use('form', function () {
        form = layui.form;
    });
    var table2 = null;

    layui.use('table', function () {
        table = layui.table;
        //第一个实例  出现原始表格
        table2 = table.render({
            elem: '#demo',
            height: 550,
            url: '../../../user/findAll', //数据接口
            toolbar: '#toolbarDemo',
            id: 'testReload',
            page: true, //开启分页
            cols: [[ //表头
                {
                    field: 'userName',
                    title: '用户名',
                    width: 190,
                    sort: true,
                    fixed: 'left'
                },
                {
                    field: 'userPhoto',
                    title: '头像',
                    width: 110,
                    templet: '#pximg'
                },
                {
                    field: 'userPhone',
                    title: '手机号',
                    width: 200
                }, {
                    field: 'userEmail',
                    title: '身份证',
                    width: 200
                }, {
                    field: 'userFoundDate',
                    title: '操作时间',
                    width: 210,
                    sort: true
                }, {
                    field: 'company',
                    title: '职业',
                    width: 110
                }, {
                    field: 'companyName',
                    title: '真实姓名',
                    width: 110
                }, {
                    width: 200,
                    align: 'center',
                    toolbar: '#barDemo'
                }]]
        });
        //监听行工具事件 // 删除但没有从数据库里 删除
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    // layer.msg(data.pxID);//得到id
                    var url = "../../../user/delete";
                    var dataone = {
                        "modID": data.userId
                    };
                    $.get(url, dataone, function (one) {
                        if (one.status == 1) {
                            layer.msg(one.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                layer.close(index);//关闭层
                                //parent.location.reload();//刷新主界面
                                $(".layui-laypage-btn").click();
                            });
                        } else {
                            layer.msg(one.msg);
                        }
                    }, "json");
                    //obj.del(); //删除对应行（tr）的DOM结构
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') {
                layer.open({
                    type: 2,
                    title: '修改页面',
                    shadeClose: true,
                    skin: 'layui-layer-molv', // 样式类名
                    shade: 0.6,
                    area: ['500px', '500px'],
                    //offset: '90px',// 好比margin-top
                    content: 'addOrUpdate.html?userId=' + data.userId + ''//iframe的url
                });
            }
        });
        //根据内容模糊查询
        $("#keyword").on('input propertychange',
            function () {
                //执行重载
                table2.reload('testReload', {
                    page: {
                        curr: 1
                        //重新从第 1 页开始
                    },
                    where: {
                        userName: $("#keyword").val()
                    }
                }, 'data');
            });
    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑 </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="pximg">
    <img src='{{getRootPath()+d.userPhoto}}' alt='图片显示'/>
</script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/javascript">
    function add() {
        //弹出层
        layer
            .open({
                type: 2,
                title: '添加页面',
                shadeClose: true,
                skin: 'layui-layer-molv', // 样式类名
                shade: 0.6,
                area: ['500px', '500px'],
                //offset: '90px',// 好比margin-top
                content: 'addOrUpdate.html?userId=' //iframe的url

            });
    }

    //得到地址栏上的参数  可以 是中文
    function getQueryStringOne(key) {
        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
            return decodeURI(r[2]);
        return null;
    }

    function getRootPath() {
        // 获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp
        var curWwwPath = window.document.location.href;
        // 获取主机地址之后的目录，如： uimcardprj/share/meun.jsp
        var pathName = window.document.location.pathname;
        var pos = curWwwPath.indexOf(pathName);
        // 获取主机地址，如： http://localhost:8083
        var localhostPaht = curWwwPath.substring(0, pos);
        // 获取带"/"的项目名，如：/uimcardprj
        var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
        return (localhostPaht + projectName) + "/";
    }
</script>
</body>
</html>